<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- {{message}} -->
        <!-- {{arr}} -->
        {{arr}}
        {{flag}}
    </div>
    <script>
        // 挂载点 1.el  2.$mount 3.render: vue里 dom接收都会被转成 虚拟dom（就是一个对象描述真实的dom） diff算法 时间复杂度   (o)n ---> o*n
        /* 
             1        ---->       1
            2  2      ----->    2   4
           3  3  3    ---->    3   3   3
        
        
        */

        // let vm = new Vue({
        //     el:"#app",
        //     render(createElement){
        //         let vdom = createElement("div","我是div");
        //         console.log(vdom);
        //         return vdom;
        //     },
        //     data:{
        //         message:"数据"
        //     }
        // })


        // 数据任意类型都可以 
        // 三种不更新情况 1.数据的更改  2. 对象的新增  3.数据长度
        // 如何解决视图不更新问题 ：Vue.set
        let vm = new Vue({
            el:"#app",
            data:{
                flag:true,
                message:"数据",
                arr:["张三","李四","王五"],
                obj:{
                    name:"李四",
                    age:20
                }
            }
        })
        setTimeout(() => {
            // console.log(vm);
            // vm._data.message = "1111"
            // vm.message = "2222";
            vm.arr[1] = "修改了";
            console.log(vm.arr);
            vm.flag = false;
            // Vue.set(vm.arr,1,"修改了");
            // console.log(vm.arr);
            // vm.obj.height = "178cm";
            // console.log(vm.obj);
            // Vue.set(vm.obj,"height","178cm");
            // console.log(vm.obj);
        }, 2000);

    </script>
</body>
</html>